<template>
  <view :style="colorStyle">
    <block v-if="!loadingPage">
      <x-skeleton
        type="list"
        :loading="true"
        v-for="(item, index, key) in 10"
        :key="key"
      >
        <view>列表</view>
      </x-skeleton>
    </block>
    <view class="tabsModule">
      <tabs :list="tablist" @tablistChange="tablistChange" />
    </view>
    <view class="couponModule" v-if="loadingPage">
      <view
        class="list"
        v-for="(item, index, key) in list"
        :key="key"
        @click="gourl(`/pages/distributor/detail?id=${item.id}`)"
      >
        <view class="block1 flex aitems between">
          <view class="info1 c1F1F1F f32"> 编 号：{{ item.id }} </view>
          <view
            class="info2 cEF8200 f28 fontWeight"
            style="min-width: 120rpx; text-align: right"
            v-if="item.status == 0"
          >
            审核中
          </view>
          <view
            class="info2 themeColor f28 fontWeight"
            style="min-width: 120rpx; text-align: right"
            v-if="item.status == 1"
          >
            审核通过
          </view>
          <view
            class="info2 cDD5C5C f28 fontWeight"
            style="min-width: 120rpx; text-align: right"
            v-if="item.status == -1"
          >
            审核失败
          </view>
        </view>
        <view class="block1 flex c525252 f24" style="padding: 24rpx 0">
          <view class="info1"> 姓名： </view>
          <view class="info2">
            {{ item.name }}
          </view>
        </view>
        <view class="block1 flex c525252 f24">
          <view class="info1"> 申请时间： </view>
          <view class="info2">
            {{ item.createTime }}
          </view>
        </view>

        <view class="block2 flex aitems between" v-if="item.status == -1">
          <view class=""> </view>
          <view class="btn1 cfff f28"> 重新申请 </view>
        </view>
      </view>

      <!-- <view class="list" v-for="(item,index,key) in 1" :key="key">
				<view class="block1 flex aitems between">
					<view class="info1 c1F1F1F f32">
						美团外卖商家入驻名称美团外卖商
					</view>
					<view class="info2 themeColor f28 fontWeight" style="min-width: 120rpx; text-align: right;">
						审核通过
					</view>
				</view>

				<view class="block1 flex c525252 f24" style="padding: 24rpx 0 0;">
					<view class="info1">
						申请时间：
					</view>
					<view class="info2">
						2024-05-25 18:00:00
					</view>
				</view>

			</view> -->

      <!-- <view class="list" v-for="(item,index,key) in 1" :key="key">
				<view class="block1 flex aitems between">
					<view class="info1 c1F1F1F f32">
						美团外卖商家入驻名称美团外卖商
					</view>
					<view class="info2 cDD5C5C f28 fontWeight" style="min-width: 120rpx; text-align: right;">
						审核失败
					</view>
				</view>

				<view class="block1 flex c525252 f24" style="padding: 24rpx 0;">
					<view class="info1">
						申请时间：
					</view>
					<view class="info2">
						2024-05-25 18:00:00
					</view>
				</view>

				<view class="block2 flex aitems between">
					<view class="">

					</view>
					<view class="btn1 cfff f28">
						重新申请
					</view>
				</view>

			</view> -->
    </view>

    <nodata v-if="list.length == 0" />

    <view class="" style="height: 100rpx"> </view>
  </view>
</template>

<script>
import { placeApplyPage } from "@/servers/servers.js";
import { HTTP_STATUS } from "@/servers/config.js";
import { loading, go } from "@/utils/wxAPI";
import { getToken, removeStorage, getStorage } from "../../utils/storage";
import colors from "@/mixins/color";
export default {
  mixins: [colors],
  data() {
    return {
      show: false,
      tablist: [
        {
          name: "全部",
          id: "",
        },
        {
          name: "审核中",
          id: 0,
        },
        {
          name: "审核通过",
          id: 1,
        },
        {
          name: "审核失败",
          id: -1,
        },
      ],
      tablistindex: 0,
      loadingPage: false,
      total: 0,
      list: [],
      current: 1,
    };
  },
  async onLoad(options) {
    if (getToken()) {
      this.placeApplyPage();
    }
  },
  onShow() {
    if (getToken()) {
      if (getStorage("distributorRef")) {
        removeStorage("distributorRef");
        this.placeApplyPage();
      }
    }
  },
  methods: {
    async placeApplyPage() {
      loading();
      let { data } = await placeApplyPage({
        current: this.current,
        size: 10,
        status: this.tablist[this.tablistindex].id,
      });
      if (data.code == HTTP_STATUS.RUSELT_SUCCESS) {
        let list = data.data.records;
        this.total = data.data.total;
        if (this.current == 1) {
          this.list = list;
        } else {
          this.list.push(...list);
        }
        setTimeout(() => {
          this.loadingPage = true;
        }, 500);
      }
      uni.stopPullDownRefresh();
      uni.hideLoading();
    },
    tablistChange(index) {
      this.tablistindex = index;
      this.current = 1;
      this.placeApplyPage();
    },
    gourl(url) {
      go(url);
    },
  },
  onReachBottom() {
    if (this.list.length == this.total) return;
    this.current += 1;
    this.placeApplyPage();
  },
  onPullDownRefresh() {
    this.current = 1;
    this.placeApplyPage();
  },
};
</script>
<style>
/* #ifdef MP-WEIXIN */
page {
  background: #f5f5f5;
}

/* #endif */
</style>
<style lang="scss" scoped>
page {
  background: #f5f5f5;
}

.couponModule {
  position: relative;
  overflow: hidden;
  margin: 30rpx 30rpx 0;

  .list {
    border-radius: 28rpx;
    background: #fff;
    padding: 28rpx 24rpx;
    margin: 0 0 30rpx 0;

    .block1 {
      .info1 {
        min-width: 120rpx;
      }

      .info2 {
      }
    }

    .block2 {
      .btn1 {
        border-radius: 40rpx;
        background: #dd5c5c;
        padding: 21rpx 34rpx;
      }
    }
  }
}

image {
  display: flex;
}

.c858585 {
  color: #858585 !important;
}

.failure-label {
  border: 2rpx solid #858585 !important;
  background: #f5f5f5 !important;
}
</style>
